<script setup lang="ts">
import { ref, provide } from 'vue';
import APPAside from './layout/AppAside.vue';
import Login from './components/Login.vue';
import { RouterView } from 'vue-router';
const login = ref(false);
provide('login', login)

</script>

<template>
  <div class="all">
    <div class="common-layout">
      <el-container>
        <!-- 导航区 -->
        <APPAside class="sideposition" />
        <!-- <el-aside :width="asideWidth + 'px'"></el-aside> -->

        <!-- 展示区 -->
        <el-main class="content">
          <RouterView></RouterView>
          <Login/>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<style scoped>
.all {
  z-index: -1;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  background-color: #f3f5fa;
}

.common-layout {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.sideposition {
  border-radius: 0.5vw;
  position: fixed;
  left: 1.67vw;
  background-color: #fafbff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  top: 50%;
  transform: translate(0, -50%);
}

.content {
  max-width: 100vw;
  /* 或者根据设计需求调整 */
  padding: 2.5vh;
}

@media (max-width:400px){
  .content {
    margin-left: 10vw;
    width: 90vw;
    padding: 0;
  }
  .sideposition {
    left: 1vw;
  }
}
</style>
